<template>
    <h2 style="text-align: center;">投资项目列表</h2>
    投资项目名称:<input type="text" v-model="Iname"/>
    投资项目总额度:<input type="text" v-model="MInIbudGet"/>-<input type="text" v-model="MaxIbudGet"/>
    <button @click="LoadData" class="btn btn-success">查询</button>
    <table class="table table-striped table-bordered table-hover"style="text-align: center;width: 100%;height: 100%;">
      <thead>
          <tr>
              <td>投资项目编号</td>
              <td>投资项目名称</td>
              <td>投资总额度</td>
              <td>已投资金额</td>
              <td>剩余金额</td>
              <td>投资人数</td>
              <td>操作</td>
          </tr> 
        </thead>
        <tbody>
          <tr v-for="item in info">
              <td>{{item.I_Id}}</td>
              <td>{{item.I_Name}}</td>
              <td>{{item.I_Budget}}</td>
              <td>{{ item.I_Receive }}</td>
              <td>{{ item.I_Residue }}</td>
              <td>{{ item.I_Number }}</td>
              <td>
                  <a href="#" @click="SaveData(Number(item.I_Id))">用户投资明细</a>
              </td>
          </tr>
        </tbody>
    </table>
    <span>共{{PageInfo.recordCount}}条数据,每页显示{{PageInfo.PageSize}}条数据,共{{PageInfo.PageCount}}页,当前第{{PageInfo.PageIndex}}/{{PageInfo.PageCount}}页</span>
    &nbsp;<a  @click="LoadPage('F')" >首页</a>&nbsp;
    <a  @click="LoadPage('P')" >上一页</a>&nbsp;
    <a  v-for="item in PageInfo.PageCount" @click="LoadPageNum(item)">{{item}}&nbsp;</a>
    <a  @click="LoadPage('N')" >下一页</a>&nbsp;
    <a  @click="LoadPage('L')" >尾页</a>&nbsp; 
    <input type="text" v-model="PageIng" style="width: 50px; height: 30px;"/>
    <input type="button" @click="LoadPageGo()" value="跳转" />
    <select v-model="CSize"  @change="LoadPageSize">
        <option value="1">显示一条</option>
        <option value="2">显示两条</option>
        <option value="3">显示三条</option>
    </select>
</template>

<script setup lang="ts">
 import {ref,onMounted} from 'vue';
 import axios from 'axios';

 import {useRouter} from 'vue-router'
 

 const router = useRouter();


 //创建响应式数据
 const info = ref([{
    I_Id:"",
    I_Name:"",
    I_Budget:0,
    I_Receive:0,
    I_Residue:0,
    I_Number:0
 }])
 
 //创建分页需要的响应式数据
 const PageInfo = ref({
    PageSize:2,
    PageIndex:1,
    PageCount:0,
    recordCount:0
 })
 
 //创建查询需要的响应式数据
 const Iname = ref("");
 const MInIbudGet = ref("");
 const MaxIbudGet = ref("");
 const CSize = ref(2);
 //创建生命周期钩子
 onMounted(()=>{
  LoadData();
  })
//查询
const LoadData = () =>{
  axios({
          url:"https://localhost:44337/api/Invests/ShowInvestInfo",
          method:"get",
          params:{
              Fname:Iname.value,
              MinBudget:MInIbudGet.value,
              MaxBudget:MaxIbudGet.value,
              PageSize:PageInfo.value.PageSize,
              PageIndex:PageInfo.value.PageIndex
          }
      }).then(res=>{
           info.value = res.data.list;

           //将后台返回的数组赋值给info
           console.log(PageInfo.value.PageSize);
           console.log(PageInfo.value.PageIndex);
           //依次将后台的数据总数，总页数接受
           PageInfo.value.recordCount = res.data.recordCount;
           PageInfo.value.PageCount = res.data.PageCount;
           console.log(res.data.recordCount);
           console.log(res.data.PageCount);
         
      }).catch(err=>{
          console.log(err);
      }).catch(err=>{
          console.log(err);
      })
}
//分页
const LoadPage = (Msg:string)=>{
    switch(Msg)
      {
         case "F":
             PageInfo.value.PageIndex = 1;
             break;
         case "P":
             if(PageInfo.value.PageIndex>1)
             {
                 PageInfo.value.PageIndex--;
             }
             else
             {
                alert('当前已经是首页了')
             }
             break;
         case "N":
             if(PageInfo.value.PageIndex<PageInfo.value.PageCount)
             {
                 PageInfo.value.PageIndex++;
             }
             else
             {
                alert('当前已经是尾页了')
             }
             break;
         case "L":
             PageInfo.value.PageIndex = PageInfo.value.PageCount;
             break;
         default:
             break;
      }
      LoadData();
}
//跳转到指定页码
const LoadPageNum = (PageIng:number) =>{
    PageInfo.value.PageIndex = PageIng;
    LoadData();
}

//创建跳转页面需要的响应式数据
const PageIng = ref("");
//跳转到指定页码
const LoadPageGo = () =>{
     const index = PageIng.value;
     
    if(index=="")
    {
       alert('请输入页码');
       return;
    }
    if(isNaN(Number(index)))
    {
       alert('请输入数字页码');
       PageIng.value = "";
       return;
    }
    if(Number(index)<1)
    {
       alert('跳转页码不能小于1');
       return;
    }
    if(Number(index)>PageInfo.value.PageCount)
    {
       alert('跳转页码不能超过最大页码');
       return;
    }
    PageInfo.value.PageIndex = Number(index);
    LoadData();
   
}

//每页显示条数
const LoadPageSize = () =>{
    const size = CSize.value;
    PageInfo.value.PageSize = Number(size);
    LoadData();
}

const SaveData=(Iid:number)=>{
      router.push({
        name:"UserInvestINfoPage",
        params:{
            Iid:Iid
        }
      })
}
</script>